<template>
    <view class="shenzhen">
        <view class="header">

            <view class="custom_header" style="height: {{navH}}px">
                <view>
                    <view id="icon">

                        <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
                    </view>
                </view>
                <view>联系人管理</view>
                <view style="color: #09f; font-size: 20px; margin-right: 10px;" @click="add">+</view>
            </view>
            <view style="display: flex;padding: 20px 60px; justify-content: space-between;">
                <!-- 1111 -->
                <qiaopaixu></qiaopaixu>
                <qiaoshaixuan></qiaoshaixuan>
            </view>
        </view>
        <!--  -->
        <view class="one">


            <view>
                <img src="/static/img/21.png" alt=""
                    style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                    style="color: #ccc; font-size: 13px;">08-23</span>
            </view>


            <view class="zhao">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p style="height: 30px; margin-top: 10px; font-size: 14px;">赵小刚 <span
                            style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px; height: 30px;">客户对产品意向很高，但是希望价格能有优惠.</p>
                    <p style="color: #666; font-size: 13px; height: 30px; margin-top: 10px;"><img src="/static/shizhong.png"
                            alt="" style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                    <p style="font-size: 13px;">来自客户:深圳木卫二科技有限公司</p>
                </view>



                <view style="margin-right: 20px; text-align: center;">
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">跟进(到访)</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;">4 &gt; </span></p>
                </view>
            </view>
            <view>
                <img src="/static/img/21.png" alt=""
                    style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                    style="color: #ccc; font-size: 13px;">08-23</span>
            </view>

            <view class="zhao">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p style="height: 30px; margin-top: 10px; font-size: 14px;">赵小刚 <span
                            style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px; height: 30px;">客户对产品意向很高，但是希望价格能有优惠.</p>
                    <p style="color: #666; font-size: 13px; height: 30px; margin-top: 10px;"><img src="/static/shizhong.png"
                            alt="" style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                    <p style="font-size: 13px;">来自客户:深圳木卫二科技有限公司</p>
                </view>



                <view style="margin-right: 20px; text-align: center;">
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">跟进(到访)</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;">4 &gt; </span></p>
                </view>
            </view>
            <view>
                <img src="/static/img/21.png" alt=""
                    style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                    style="color: #ccc; font-size: 13px;">08-23</span>
            </view>

            <view class="zhao">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p style="height: 30px; margin-top: 10px; font-size: 14px;">赵小刚 <span
                            style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px; height: 30px;">客户对产品意向很高，但是希望价格能有优惠.</p>
                    <p style="color: #666; font-size: 13px; height: 30px; margin-top: 10px;"><img src="/static/shizhong.png"
                            alt="" style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                    <p style="font-size: 13px;">来自客户:深圳木卫二科技有限公司</p>
                </view>



                <view style="margin-right: 20px; text-align: center;">
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">跟进(到访)</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;">4 &gt; </span></p>
                </view>
            </view>
            <view>
                <img src="/static/img/21.png" alt=""
                    style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                    style="color: #ccc; font-size: 13px;">08-23</span>
            </view>

            <view class="zhao">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p style="height: 30px; margin-top: 10px; font-size: 14px;">赵小刚 <span
                            style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px; height: 30px;">客户对产品意向很高，但是希望价格能有优惠.</p>
                    <p style="color: #666; font-size: 13px; height: 30px; margin-top: 10px;"><img src="/static/shizhong.png"
                            alt="" style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                    <p style="font-size: 13px;">来自客户:深圳木卫二科技有限公司</p>
                </view>



                <view style="margin-right: 20px; text-align: center;">
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">跟进(到访)</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;">4 &gt; </span></p>
                </view>
            </view>
            <view>
                <img src="/static/img/21.png" alt=""
                    style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                    style="color: #ccc; font-size: 13px;">08-23</span>
            </view>

            <view class="zhao">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p style="height: 30px; margin-top: 10px; font-size: 14px;">赵小刚 <span
                            style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px; height: 30px;">客户对产品意向很高，但是希望价格能有优惠.</p>
                    <p style="color: #666; font-size: 13px; height: 30px; margin-top: 10px;"><img src="/static/shizhong.png"
                            alt="" style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                    <p style="font-size: 13px;">来自客户:深圳木卫二科技有限公司</p>
                </view>



                <view style="margin-right: 20px; text-align: center;">
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">跟进(到访)</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;">4 &gt; </span></p>
                </view>
            </view>
            <view style="height: 30px; margin-top: 30px;">

                <u-loading-icon text="加载中"> </u-loading-icon>
            </view>
            <view class="footer">
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import qiaoshaixuan from '@/pages/qiao-crm/tan/qiaoshaixuan.vue'
import qiaopaixu from '@/pages/qiao-crm/tan/qiaopaixu.vue'
import { ref } from "vue";


const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}

const add = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaochuangjian'
    })
}
</script>

<style scoped lang="scss">
.zhao {
    display: flex;
    width: 360px;
    margin-left: 8px;
    box-shadow: 0px 0px 10px #ccc;
    border-radius: 10px;
    height: 130px;
}

.active {
    color: blue;
}

.vv {
    margin-right: 10px;
    text-align: center;
    color: #666;
}

.one_img {
    width: 30px;
    height: 30px;
}

.one_p:nth-child(1) {
    margin-left: 8px;
    margin-top: 8px;
}

.one_b {
    width: 350px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
}

.one_a {
    display: flex;
}

.one_li {
    width: 340px;
    height: 150px;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    margin-top: 15px;
    margin-left: 10px;
    line-height: 30px;
    position: relative;
}

.box1 {
    position: absolute;
    top: 110px;
    left: 10px;
    display: flex;
    justify-content: space-between;
    width: 320px;
}

.img {
    width: 50px;
    height: 50px;
}

.header {
    height: 80px;
    background-color: #fff;
}

.one {
    height: calc(100vh - 80px - 50px);
    background-color: rgb(249, 249, 249);
    overflow: hidden;
    overflow-y: scroll;
    color: #666;
}

.footer {
    height: 50px;
}

.custom_header {
    display: flex;
    justify-content: space-between;
    width: 100vw;
    font-weight: bold;
    z-index: 99;
    margin-top: 40px;
    background-color: #fff;
}

.search {
    display: flex;
    width: 375px;
    justify-content: space-between;
    padding-top: 10px;
    align-items: center;
    padding: 10px 10px;
    position: relative;

    .inp {
        width: 250px;
        height: 60rpx;
        border: 1rpx solid #ccc;
        border-radius: 30rpx;
        padding-left: 30px;
        margin-left: 30px;

    }
}

.search_img {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 100rpx;
    top: 35rpx;
}

.shenzhen {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}
</style>
